<template>
  <view>
    <u-navbar title="添加收货地址" back-icon-size="34" title-size="36" :border-bottom="false" title-color="#222222" back-icon-color="#222222"></u-navbar>
    <view class="" style="background: #fff; margin-top: 20rpx">
      <view class="" style="display: flex; align-items: center; padding: 45rpx 27rpx 45rpx 27rpx; justify-content: space-between; border-bottom: 1rpx solid #f8f8f8">
        <view class="">收件人</view>
        <view class="">
          <input type="text" value="" placeholder="收件人姓名" v-model="name" style="font-size: 26rpx; text-align: right" />
        </view>
      </view>
      <view class="" style="display: flex; align-items: center; padding: 45rpx 27rpx; justify-content: space-between; border-bottom: 1rpx solid #f8f8f8">
        <view class="">手机号</view>
        <view class="">
          <input type="text" value="" placeholder="请输入收件人手机号码" v-model="mobile" style="font-size: 26rpx; text-align: right" />
        </view>
      </view>
      <!-- 选择地址 -->
      <view class="" style="display: flex; align-items: center; padding: 45rpx 27rpx; justify-content: space-between; border-bottom: 1rpx solid #f8f8f8" @tap="show = true">
        <view class="">选择地址</view>
        <view class="">
          <u-icon name="arrow-right" :label="city" label-pos="left"></u-icon>
        </view>
      </view>
      <!-- 详细地址 -->
      <view class="" style="padding: 36rpx 0rpx; margin: 0 31rpx">
        <view class="" style="font-size: 28rpx">详细地址</view>
        <view class="">
          <u-input v-model="detail" type="textarea" :border="false" :height="100" :auto-height="true" />
        </view>
      </view>
      <!-- 设置为默认地址 -->
      <view class="" style="display: flex; justify-content: space-between; padding: 0 27rpx; padding-bottom: 47rpx; align-items: center">
        <view class="" style="font-size: 30rpx">设置为默认地址</view>
        <view class="">
          <u-switch v-model="checked" active-color="#E50014" inactive-color="#eee" size="30"></u-switch>
        </view>
      </view>
    </view>
    <view class="" style="background: #fff; position: fixed; bottom: 0; width: 100%">
      <view class="btnbg" style="margin: 60rpx 115rpx" @tap="add">保存</view>
    </view>
    <u-picker mode="region" v-model="show" @confirm="confirm"></u-picker>
  </view>
</template>

<script>
export default {
  data() {
    return {
      name: '',
      mobile: '',
      city: '省市区街道',
      detail: '',
      checked: false,
      show: false,
      type: null,
      address_id: null
    };
  },
  methods: {
    confirm(e) {
      console.log(e);
      this.city = e.province.label + e.city.label + e.area.label;
    },
    add() {
      if (this.name == '') {
        uni.showToast({
          title: '请输入收件人姓名',
          icon: 'none'
        });
      } else if (this.mobile == '') {
        uni.showToast({
          title: '请输入收件人手机号',
          icon: 'none'
        });
      } else if (this.city == '省市区街道') {
        uni.showToast({
          title: '请选择您的地址',
          icon: 'none'
        });
      } else if (this.detail == '') {
        uni.showToast({
          title: '请输入您的详细地址',
          icon: 'none'
        });
      } else {
        if (this.type == null) {
          this.api({
            url: '/api/shop/addAddress',
            method: 'post',
            data: {
              name: this.name,
              mobile: this.mobile,
              city: this.city,
              details: this.detail,
              is_default: this.checked ? 1 : 0
            }
          }).then((res) => {
            setTimeout(() => {
              uni.navigateBack();
            });
          });
        } else {
          this.api({
            url: '/api/shop/editAddress',
            method: 'post',
            data: {
              name: this.name,
              mobile: this.mobile,
              city: this.city,
              details: this.detail,
              is_default: this.checked ? 1 : 0,
              address_id: this.type.address_id
            }
          }).then((res) => {
            setTimeout(() => {
              uni.navigateBack();
            });
          });
        }
      }
    }
  },
  onLoad(op) {
    if (op.type) {
      this.type = JSON.parse(op.type);
      console.log(this.type);
      this.name = this.type.name;
      this.mobile = this.type.mobile;
      this.city = this.type.city;
      this.detail = this.type.details;
      this.checked = this.type.is_default == 1 ? true : false;
    }
  }
};
</script>

<style>
page {
  background: #f6f6f6;
}

.btnbg {
  height: 80rpx;
  background: linear-gradient(180deg, #e50014, #ff6572);
  border-radius: 40rpx;
  text-align: center;
  line-height: 80rpx;
  color: #fff;
  font-size: 32rpx;
}
</style>
